<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in loveTalkStore.talkList" :key="talk.id">{{talk.title}}</li>
    </ul>
  </div>

</template>

<script lang="ts" setup name="LoveTalk">
import {reactive} from "vue"
import axios from "axios";
import {nanoid} from 'nanoid'
import {useLoveTalkStore} from "@/store/loveTalk"

const loveTalkStore = useLoveTalkStore()

console.log('bb',loveTalkStore.talkList)

// let talkList = reactive(
//     [
//       {id: '01',title:'aaaaaaaaaa'},
//       {id: '02',title:'bbbbbbbbbb'},
//       {id: '03',title:'cccccccccc'}
//     ]
// )

//方法
async function getLoveTalk() {
  //发送请求
  // let {data} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
  // let {content:title} =data
  // // 封装对象
  // let obj = {id:nanoid(),title}
  // loveTalkStore.talkList.unshift(obj)
  // 第三种方法
  await loveTalkStore.unshiftLoveTalk()

}
</script>

<style scoped>
.talk {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

</style>